<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            cursor: grab;
            list-style: none;
            text-align: center;
            font-size: 12px;
            padding: 5px 0px;
            background: dodgerblue;
            color: #fff;
        }

       .active{
            background: lightseagreen !important;
        }

        li:hover{
            background: lightseagreen !important;
        }
        .bar li{
            list-style: none;
            background: dodgerblue;
            color: #fff;
            margin-bottom: 3px;
            text-align: center;
            font-size: 12px;
            padding: 5px 0px;
        }

        .bar-active {
            background: lightseagreen !important;
        }
    </style>
</head>
<body>
<div style="width: 100%;height:100%;display: flex;flex-direction: row;">
    <div style="width: 200px;height:100%;background: #f0f0f0;display: flex;flex-direction: column">
        <div class="bar" style="display: flex;flex-direction: column;height: 200px;">
            <li onclick="stage.changeStatus(0)"  class="bar-active">浏览模式</li>
            <li onclick="stage.changeStatus(1)">编辑模式</li>
<!--            <li onclick="addBackground()">更换背景</li>-->
<!--            <li onclick="addText()">添加文字</li>-->
            <li onclick="stage.attrView()">属性编辑</li>
            <li onclick="stage.remove()">删除选中对象</li>
            <li onclick="save()">保存</li>
        </div>
        <div style="background: lightseagreen" id="objectList">
        </div>
    </div>
    <canvas id="canvas" width="1200" height="800" style="">
        <textarea id="text" oninput="textInput" style="width: 400px;height: 600px;"></textarea>
    </canvas>
    <div style="background: dodgerblue;width: 300px;height:100%;" id="sysList">
    </div>
</div>


<script src="design.js"></script>
<script>
    var stage = new Stage("objectList", "sysList", "canvas", "http://ncwu.jijiaox.com/static/tpl/enroll.jpeg", 600, 400);
    setTimeout(()=>{
        //延迟渲染
        stage.render()
    }, 1000)
    let result = {
        background:{
            uri:"http://ncwu.jijiaox.com/static/tpl/enroll.jpeg",
            width:600,
            height:400
        },
        objectList:[],
        metaList:[{key:"name", name:"姓名"},{key:"sex", name:"性别"},
            {key:"birthday", name:"出生年月"},{key:"major", name:"专业"},{key:"year", name:"年级"}]
    }
    console.log(JSON.stringify(new Meta("111", "2222")))
    stage.parseData(JSON.stringify(result));


    function save(){
        console.log(stage.getData())
    }

</script>
</body>
</html>